<template>
    <div></div>
</template>

<script lang="js">
import { defineComponent, watch, provide, renderSlot } from 'vue';
import useParentComponentEffect from '../BigeMap/useParentComponentEffect';
import { callWhenDifferentValue, conditionalCall, warn, isDef, bindEvents } from '../BigeMap/utils';

export default defineComponent({
    props: {
        content: { type: String, required: true },
        position: { type: null, required: true },
        offset: { type: Object, required: false, default: () => ({
            x: 0,
            y: 0
        }) },
        zIndex: { type: Number, required: false },
        style: { type: null, required: false },
        enableMassClear: { type: Boolean, required: false, default: true },
        visible: { type: Boolean, required: false, default: true },
        onClick: { type: null, required: false },
        onDblclick: { type: null, required: false },
        onMousedown: { type: null, required: false },
        onMouseup: { type: null, required: false },
        onMouseout: { type: null, required: false },
        onMouseover: { type: null, required: false },
        onRemove: { type: null, required: false },
        onRightclick: { type: null, required: false },
        withConvert: { type: Boolean, required: false, default: true },
    },
    emits: [
        'initd',
        'unload',
        'click',
        'dblclick',
        'mousedown',
        'mouseup',
        'mouseout',
        'mouseover',
        'remove',
        'rightclick'
    ],

    setup(__props, {attrs, emit:vueEmits}) {
        const props = __props;
        let label;
        const hasLabel = () => !!label;
        const { ready } = useParentComponentEffect((map) => {
            const cal = () => {
                // label && map.removeOverlay(label);
                label && map.labelGroup.removeLayer(label);
            };
            const init = () => {
                if (!props.content)
                    return process.env.NODE_ENV !== 'production' && warn('BLabel', 'content is required');
                if (!props.position)
                    return process.env.NODE_ENV !== 'production' && warn('BLabel', 'position is required');
                const { content, position, offset, enableMassClear, style, visible, zIndex } = props;
                // const options = {
                //     position: new BMapGL.Point(position.lng, position.lat),
                //     offset: new BMapGL.Size(offset.x, offset.y),
                //     enableMassClear
                // };
                // label = new BMapGL.Label(content, options);
                // // 自定义文本标注样式
                // if (style) {
                //     label.setStyle(style);
                // }
                // visible && map.addOverlay(label);
                // isDef(zIndex) && setZIndex(zIndex);
                // const _el = document.createElement('div');
                // _el.innerHTML = content;

                // label = window.BM.marker(position, {
                //     icon: window.BM.divIcon({
                //         html: _el.outerHTML,
                //         bgPos: [offset?.x||0, offset?.y||0],
                //     }),
                //     _el,
                // });

                label = window.BM_BMapGL.Label(content, {
                    offset,
                    position: (props.withConvert ? window.BM_BMapGL.convertLnglatIn(position) : position),
                });
                setStyle(style);

                visible && map.labelGroup.addLayer(label);
                bindEvents(props, vueEmits, label);
                watch(() => props.offset, callWhenDifferentValue(setOffset), { deep: true });
                watch(() => props.style, callWhenDifferentValue(setStyle), { deep: true });
                watch(() => props.enableMassClear, setMassClear);
                watch(() => props.zIndex, setZIndex);
                watch(() => props.visible, (n) => {
                    // map[n ? 'addOverlay' : 'removeOverlay'](label);
                    map.labelGroup[n ? 'addLayer' : 'removeLayer'](label);
                });
            };
            init();
            ready(map, label);
            // 监听值变化
            watch(() => props.position, callWhenDifferentValue(conditionalCall(hasLabel, setPosition, init)), { deep: true });
            watch(() => props.content, conditionalCall(hasLabel, setContent, init));
            return cal;
        });
        provide('getOverlayInstance', () => label);
        function setZIndex(zIndex) {
            isDef(zIndex) && label.setZIndex(zIndex);
        }
        function setPosition(position) {
            // console.log('------ setPosition', label, position)
            if (position) {
                const pt = new window.BM_BMapGL.Point(position.lng, position.lat);
                if (props.withConvert) {
                    label.setLatLng(window.BM_BMapGL.convertLnglatIn(pt));
                } else {
                    label.setLatLng(pt);
                }
            }
        }
        function setStyle(styles) {
            if (isDef(styles)) {
                // label.setStyle(styles);
                label.options._el.style['transform'] = `translate(${label.options.icon.options.bgPos[0]}px,${label.options.icon.options.bgPos[1]}px)`;
                Object.keys(styles).forEach((k) => {
                    label.options._el.style[k] = styles[k];
                });
                label.setIcon(window.BM.divIcon({
                    html: label.options._el.outerHTML,
                    bgPos: label.options.icon.options.bgPos,
                }));
            }
        }
        function setContent(content) {
            // label.setContent(content);
            label.options._el.innerHTML = content;
            label.setIcon(window.BM.divIcon({
                html: label.options._el.outerHTML,
                bgPos: label.options.icon.options.bgPos,
            }));
        }
        function setOffset(offset) {
            // label.setOffset(new BMapGL.Size(offset.x, offset.y));
            label.options.icon.options.bgPos = [offset.x, offset.y];
            label.options._el.style['transform'] = `translate(${label.options.icon.options.bgPos[0]}px,${label.options.icon.options.bgPos[1]}px)`;
            Object.keys(styles).forEach((k) => {
                label.options._el.style[k] = styles[k];
            });
            label.setIcon(window.BM.divIcon({
                html: label.options._el.outerHTML,
                bgPos: [offset.x, offset.y],
            }));
        }
        function setMassClear(enableMassClear) {
            // enableMassClear ? label.enableMassClear() : label.disableMassClear();
        }
        return (_ctx, _cache) => {
            return renderSlot(_ctx.$slots, "default");
        };
    }
})
</script>